<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom :bgColor="'bg-' + theme" :isBack="false">
			<block slot="content">商城</block>
		</cu-custom>
		<!-- #endif -->

		<view class="">
			<block v-if="detail">
				<view class="app-container">
					<view class="bg-white bg-header add-img" style="background-color: #f5f5f5;"></view>
					<!-- <view class="bg-arc">
						<view style="background-color: #ffffff!important;" class="bgcolor" :class="'bg-'+theme"></view>
					</view> -->
					<view class="app-body">
						<!-- #ifdef APP-VUE -->
						<view class="paddint-top-xl margin-top-xl"></view>
						<!-- #endif -->
						<block v-for="(item, index) in detail.items" :key="index">
							<PageIndex :ref="'PageIndex'+index" :value="item" :value1="livestart" :value2="liveend" :value3="livearr"></PageIndex>
						</block>

						<foot></foot>
					</view>
				</view>
			</block>
		</view>
		
		<Navbar ref="navbar" PageCur="index"></Navbar>
		
		
		
		<view class="cu-modal" :class="modalName=='Image'?'show':''">
			<view class="cu-dialog">
				<image v-if="gzh_code" :src="gzh_code"
				 mode="aspectFill" class="gzh_qrcode"></image>
				<image v-else src="@/static/icon-gzh.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
				<view class="close-btn" @click="hideModal">关闭</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='next_pid'?'show':''">
			<view class="cu-dialog">
				<image src="@/static/red/shenpi.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
				<view class="close-btn" @click="onclode(statistics.next_data.id)"  v-if="statistics">关闭</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='s_hei'?'show':''">
			<view class="cu-dialog">
				<image src="@/static/sh_pass.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
				<view class="close-btn" @click="onclode(statistics.m_revice.id)"  v-if="statistics">关闭</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='not_pass'?'show':''">
			
			<view class="cu-dialog">
				<view class="action" bindtap="hideModal">
					<text class="cuIcon-close text-red "></text> 
				</view> 
				<image src="@/static/not_pass.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
				<view class="close-btn" @click="onclode(statistics.m_revice.id)"  v-if="statistics">关闭</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='is_win'?'show':''">
			
			<view class="cu-dialog show-none" @click="gz_win(statistics.w_log.id)" v-if="statistics">
				<!-- bg-white -->
					<view class="cu-bar  justify-end show-none"> 
						<view class="action" bindtap="hideModal">
							<text class="cuIcon-close text-red"></text> 
						</view>
					</view>
					<image src="@/static/red/gxzj.png"
					 mode="aspectFill" class="gzh_qrcode"></image>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='isnot_win'?'show':''">
			<view class="cu-dialog show-none" @click="gz_win(statistics.w_log.id)" v-if="statistics">
				<view class="cu-bar  justify-end">
					<view class="action" bindtap="hideModal">
						<text class="cuIcon-close text-red"></text> 
					</view>
				</view>
				<image src="@/static/red/hyh.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='join_pay'?'show':''">
			<view class="cu-dialog show-none" @click="payjoin_close(statistics.join_pay.id)" v-if="statistics">
				<view class="cu-bar  justify-end">
					<view class="action" bindtap="hideModal">
						<text class="cuIcon-close text-red"></text> 
					</view>
				</view>
				<image src="@/static/qiangou.png"
				 mode="aspectFill" class="gzh_qrcode"></image>
			</view>
		</view> 
	
	</view>
</template>

<script>
	import locationView from '@/merchantPackages/components/locationView.vue'
	import PageIndex from '@/components/page/pageIndex.vue'
	import Navbar from '@/components/default/Navbar.vue'
	import Foot from '@/components/default/foot.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		name: "index",
		components: {
			locationView,
			PageIndex,
			Navbar,
			Foot,
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				config:null,
				page_code: 'SHOP_HOME',
				detail: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				livestart:null,
				liveend:null,
				livearr:{
					endday:0,
					endhou:0,
					endmin:0,
					endsec:0,
					
					startday:0,
					starthou:0,
					startmin:0,
					startsec:0
				},
				modalName: null,
				statistics: null,
				isGHZ: 0,
				gzh_code:'',
				notity:'',
				nofity_num: 24,
			}
		},
		onLoad(options) {
			this.$common.getConfig().then((config) => {
				this.config = config
				this.$common.getMember(true).then((member) => {
				
				let share_url=this.config.web_url+"/h5/#/pages/shop/index" + "?share_id=" + member.id;
				this.$jwx.readyShare(this.config.web_site_title,this.config.web_site_title,share_url,config.logo)	
				})
				this.getTotal();
			})
			this.pg_times();
			console.log(this.livestart)
		},
		// onShow() {
		// 	let data = this.$common.getCache('page-' + this.page_code)
		// 	this.getIndex()
		// 	// if (!data) {
		// 	// 	this.getIndex()
		// 	// } else {
		// 	// 	this.detail = data
		// 	// 	uni.setStorageSync('theme_default', this.detail.style)
		// 	// 	this.theme = this.$config.THEME()
			
		// 		if (this.$refs.navbar) this.$refs.navbar.updateset()
		// 		if (this.$refs.PageIndex0) {
		// 			this.$refs.PageIndex0[0].updateset()
		// 		}
		// 	// }
			
			
			
			
		// 	if (this.detail) uni.setStorageSync('theme_default', this.detail.style)
		// 	this.theme = this.$config.THEME()
		// 	if (this.$refs.navbar) this.$refs.navbar.updateset()
		// 	if (this.$refs.PageIndex0) {
		// 		this.$refs.PageIndex0[0].updateset()
		// 	}
		// },
		created() {
					console.log('created');
					console.log(uni.getStorageSync('app_data'));
					
					if (this.detail) {
						uni.setStorageSync('theme_default', this.detail.style)
					}else{
						this.getIndex();
					}
					this.theme = this.$config.THEME()
					if (this.$refs.navbar) this.$refs.navbar.updateset()
					if (this.$refs.PageIndex0) {
						this.$refs.PageIndex0[0].updateset()
					}
				},
		methods: {
			onLocation(){
				
				uni.startPullDownRefresh({})
			},
			
			gz_win(id){
				this.$http
					.post('win_home', {id:id})
					.then((response) => {
						this.modalName =''
						if(this.statistics.w_log.is_win==1){
							// uni.redirectTo({
							// 	url: '/pages/shop/marketing/points_lottery'
							// })
							this.modalName = null
						}else{
							// uni.redirectTo({
							// 	url: '/pages/member/interval/index'
							// })
							this.modalName = null
						}
					})
					.catch((response) => {
						console.log(response)
					})
			},
			payjoin_close(id){
				this.$http
					.post('payjoin_home', {id:id})
					.then((response) => {
						this.modalName =''
					})
					.catch((response) => {
						console.log(response)
					})
			},
			onclode(id){
				this.$http
					.post('sq_home', {id:id})
					.then((response) => {
						this.modalName =''
						uni.startPullDownRefresh({})
					})
					.catch((response) => {
						console.log(response)
					})
			},
			goGZH() {
				if (this.isGHZ) {
					this.modalName = 'Image'
				}
			},
			See (e) {
				window.location.href = e
			},
			
			getTotal() { 
				//this.modalName = 'not_pass'
				//this.modalName = 's_hei'
				//return false
				this.$http
					.get('data_home', {})
					.then((response) => {
						this.statistics = response.data.data
						if(this.statistics && this.statistics.next_data){
							if(this.statistics.next_data.id){
								this.modalName = 'next_pid'
							}
						}
					
						if(this.statistics && this.statistics.m_revice){
							if(this.statistics.m_revice.status==2){
								this.modalName = 'not_pass'
							}else if(this.statistics.m_revice.status==1){
								this.modalName = 's_hei'
							}
						}
						if(this.statistics && this.statistics.next_data){
							if(this.statistics.m_revice.status==2){
								this.modalName = 'not_pass'
							}else if(this.statistics.m_revice.status==1){
								this.modalName = 's_hei'
							}
						}
						if(this.statistics && this.statistics.w_log){
							if(this.statistics.w_log.is_win==1){
								this.modalName = 'is_win'
							}else{
								this.modalName = 'isnot_win'
							}
						}
						if(this.statistics && this.statistics.join_pay){
							if(this.statistics.join_pay.id>0){
								this.modalName = 'join_pay'
							}
						}
					})
					.catch((response) => {
						console.log(response)
					})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			
			
			pg_times(){
				this.$http
					.get('pg_times', {})
					.then((response) => {
						// console.log(response)
						
						if (response.data.data != null) {
							if (response.data.data.start_time != 0) {
								this.getLiveTimeCount(response.data.data.start_time);
							}
							if (response.data.data.end_time != 0) {
								this.getLiveTimeEnd(response.data.data.end_time);
							}
						}
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getLiveTimeEnd(startTime){
				
				if(startTime){  //如果设置了开始时间
					this.liveEndTimes=setInterval(()=>{
			                        //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime=startTime.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						
						if(preTime - nowTime > 0){
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
							this.liveend=+obj.day+ + '天' +obj.hou+ '时' + obj.min + '分' + obj.sec + '秒'
							this.livearr.endday = obj.day
							this.livearr.endhou = obj.hou
							this.livearr.endmin = obj.min
							this.livearr.endsec = obj.sec
						} else {
							obj = {day:'00',hou:'00',min:'00',sec:'00'};
							// this.liveend=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.liveend = null
							clearInterval(this.liveEndTimes)
						}  
					},1000)
				}else{
					this.liveend=null
				}
			},
			getLiveTimeCount(startTime){
				
				if(startTime){  //如果设置了开始时间
					this.liveCountTimes=setInterval(()=>{
			                        //注：不论安卓还是ios，请将时间如 2020-02-02 20:20:20 转化为 2020/02/02 20:20:20 这种形式后再使用，否则无法转换，如下转换即可↓
						let transedPreTime=startTime.replace(/-/g,'/') //这里转化时间格式为以/分隔形式
						let nowTime = new Date().getTime();
						let preTime = new Date(transedPreTime).getTime()
						let obj = null;
						
						if(preTime - nowTime > 0){
							let time = (preTime - nowTime) / 1000;
							let day = parseInt(time / (60 * 60 * 24));
							let hou = parseInt(time % (60 * 60 * 24) / 3600);
							let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
							let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
							obj = {
								day: day<10?'0'+day:day,
								hou: hou<10?'0'+hou:hou,
								min: min<10?'0'+min:min,
								sec: sec<10?'0'+sec:sec
							};
							this.livestart=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.livearr.startday = obj.day
							this.livearr.starthou = obj.hou
							this.livearr.startmin = obj.min
							this.livearr.startsec = obj.sec
							// console.log(this.livestart)
						} else {
							obj = {day:'00',hou:'00',min:'00',sec:'00'};
							// this.livestart=obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
							this.livestart = null
							clearInterval(this.liveCountTimes)
						}  
					},1000)
				}else{
					this.livestart=null
				}
			},
			getIndex() {
				this.$http
					.get('pages', {
						code: this.page_code
					})
					.then((response) => {
						this.detail = response.data.data
						this.$common.setCache('page-' + this.page_code, this.detail, 10 * 60)
						uni.setStorageSync('theme_default', this.detail.style)
						this.theme = this.$config.THEME()

						if (this.$refs.navbar) this.$refs.navbar.updateset()
						if (this.$refs.PageIndex0) {
							this.$refs.PageIndex0[0].updateset()
						}
						uni.stopPullDownRefresh()
						uni.hideLoading()
					})
					.catch((response) => {
						uni.hideLoading()
					})
			},
		},
		onPullDownRefresh() {
			this.getIndex()
			this.getTotal();
		},
		onReachBottom() {},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/index'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-商城',
				imageUrl: '',
				path: path
			}
		},
		
	}
</script>

<style>
	.page_footer {
		position: fixed;
		/* width: 100%; */
		/* left: 0; */
		right: 0;
		bottom: 15%;
		z-index: 9999999;
	}
	page {
		background-color: #F8F9FB;
	}

	.card-swiper uni-swiper-item,
	.card-swiper swiper-item {
		padding: 0 !important;
	}

	.category-view {
		padding: 10px 0 0 0;
	}

	.m-title {
		font-size: 18px !important;
	}

	.to-top {
		position: fixed;
		right: 20upx;
		bottom: 120upx;
		z-index: 10;
	}

	.to-top .ctr {
		width: 70upx;
		height: 70upx;
	}

	.to-top .ctr image {
		width: 100%;
		height: 100%;
	}

	.search-form {
		border-radius: 30rpx;
	}

	.goods-view {
		padding: 0 10px;
	}

	.goods-item {}

	.article-view {
		display: flex;
		justify-content: space-between;
		padding: 15px;
	}

	.article-list {
		width: 100%;
		margin-left: 15px;
		margin-right: 15px;
		overflow: hidden;
	}

	.article-view .article-list .li {
		width: 100%;
		height: 24px;
		line-height: 24px;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 10px;
		font-size: 16px;
	}

	.article-view .article-list .cuIcon-title:before {
		margin-right: 10px
	}

	.article-view .cu-avatar {
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
</style>

<style>
	.liveplay-box{
		margin: 20rpx 25rpx 0;
		padding: 22rpx 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.liveplay-box .topic-line{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topic-line image{
		width: 137rpx;
		height: 32rpx;
	}
	.topic-line .more{
		font-size: 30rpx;
		color: #666666;
	}
	.liveplay-box .zone-time{
		margin-top: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.zone-time .item{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.zone-time .item .time{
		font-size: 30rpx;
		color: #999999;
	}
	.zone-time .item .zone{
		margin-left: 20rpx;
		width: 100rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: #FFE24D;
		font-size: 22rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}
	.liveplay-box .deadline-box{
		margin-top: 15rpx;
		text-align: center;
		font-size: 22rpx;
		color: #999999;
		white-space: nowrap;
	}
	.liveplay-box .deadline-box text{
		margin: 0 2rpx;
		font-size: 16rpx;
		width: 27rpx;
		height: 27rpx;
		text-align: center;
		line-height: 27rpx;
		color: #FFFFFF;
		background-color: #CC0000;
	}
	.liveplay-box .liveplayer-list{
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}
	.liveplayer-list .liveplayer{
		width: 256rpx;
		padding: 18rpx;
		border-top: 2rpx #999999 solid;
		border-right: 2rpx #999999 solid;
	}
	.liveplayer-list .liveplayer:last-child{
		border-right: none;
	}
	.liveplayer .cover-box{
		width: 220rpx;
		height: 220rpx;
		position: relative;
	}
	.cover-box .cover{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.cover-box .status{
		position: absolute;
		top: 10rpx;
		left: 14rpx;
		width: 140rpx;
		height: 38rpx;
		background-color: #FFFFFF;
		border-radius: 19rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.cover-box .status image{
		width: 20rpx;
		height: 20rpx;
	}
	.cover-box .status text{
		font-size: 24rpx;
		color: #CC0000;
	}
	.liveplayer .title{
		width: 100%;
		text-align: center;
		font-size: 22rpx;
		color: #CCCCCC;
		line-height: 45rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.liveplayer .attr{
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
	}
	.liveplayer .attr text{
		padding: 3rpx 8rpx;
		border-radius: 5rpx;
		font-size: 16rpx;
		white-space: nowrap;
	}
	.liveplayer .attr .red-bg{
		background-color: #CC0000;
		color: #FFFFFF;
		border: 1rpx #CC0000 solid;
	}
	.liveplayer .attr .red-round{
		background-color: #FFFFFF;
		color: #CC0000;
		border: 1rpx #CC0000 solid;
	}
	.liveplayer .live-btn{
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.liveplayer .live-btn view{
		border-radius: 10rpx;
		padding: 4rpx 18rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		background-color: #CC0000;
	}
</style>
<style>
	.title-box{
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title-box .long-square{
		width: 53rpx;
		height: 6rpx;
		border-radius: 2rpx;
		background-color: #999999;
	}
	.title-box .short-square{
		width: 8rpx;
		height: 8rpx;
		border-radius: 2rpx;
		background-color: #666666;
	}
	.title-box .short-square.left{
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.title-box .short-square.right{
		margin-left: 20rpx;
		margin-right: 10rpx;
	}
	.title-box .title{
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}
</style>
<style>
	.zone-box{
		padding: 0 25rpx;
	}
	.zone-box .goods-item{
		background-color: #FFFFFF;
		padding: 8rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}
	.goods-item .thumb-box{
		margin-right: 45rpx;
		flex-shrink: 0;
		width: 204rpx;
		height: 204rpx;
		position: relative;
	}
	.thumb-box image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.thumb-box view{
		position: absolute;
		top: 0;
		left: 0;
		width: 104rpx;
		height: 36rpx;
		background-color: #F9263E;
		border-top-right-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		text-align: center;
		font-size: 14rpx;
		color: #FFFFFF;
	}
	.goods-item .info{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.info .title{
		width: 420rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #666666;
		overflow: hidden;    
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.info .desc-box{
		margin-top: 20rpx;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.desc-box .desc-price{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.desc-price .description{
		font-size: 20rpx;
		color: #999999;
		display: -webkit-box;    
		-webkit-box-orient: vertical;    
		-webkit-line-clamp: 3;    
		overflow: hidden;
	}
	.desc-price .price{
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #F9263E;
	}
	.info .pin-btn{
		flex-shrink: 0;
		width: 75rpx;
		height: 75rpx;
		margin-left: 10rpx;
	}
	.add-img{
		z-index: 2;
		background-image: url('../../static/red/member_back.png');
	}
</style>